<script setup lang="ts">
//获取屏幕边界到安全区域的距离
//微信小程序官方提供的接口
const { safeAreaInsets } = uni.getSystemInfoSync()
const props = defineProps({
    title:{
        type:String,
        default:''
    }
})
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <image class="logo-image" src="@/static/images/hospital_logo.png"></image>
      <text class="logo-text">{{ props.title }}</text>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  background-image: url(@/static/images/back_img.png); 
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 120rpx;
  width: 100%;
  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64rpx;
    width: 100%;
    padding-top: 20rpx;
    .logo-image {
      width: 86rpx;
      height: 86rpx;
      border-radius: 50%;
    }
    .logo-text {
      line-height: 28rpx;
      color:white;
      font-size: 32rpx;
      margin-left: 15px;
      margin-right: 60rpx;
    }
  }
}
</style>